<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">
    <title>菩提阁</title>

    <script type="text/javascript"
            src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=6i4KTPzHow6gLVWqYK6vOKw0zFBaapxp"></script>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }

        #allmap {
            /*自己计算减去多少 需要用多少*/
            /*height: calc(100vh - 188rem);*/
            height: 100%;
            width: 100%;
            overflow: hidden;
        }
    </style>
    <link rel="icon" href="./../images/favico.ico">
    <!--不同屏幕尺寸根字体设置-->
    <script src="./../js/base.js"></script>
    <!--element-ui的样式-->
    <link rel="stylesheet" href="../../backend/plugins/element-ui/index.css"/>
    <!--引入vant样式-->
    <link rel="stylesheet" href="../styles/vant.min.css"/>
    <!-- 引入样式  -->
    <link rel="stylesheet" href="../styles/index.css"/>
    <!--本页面内容的样式-->
    <link rel="stylesheet" href="./../styles/address.css"/>
</head>
<body>
<div id="address" class="app">
    <div class="divHead">
        <div class="divTitle">
            <i class="el-icon-arrow-left" @click="goBack"></i>计算配送时间与距离
        </div>
    </div>

    <!-- 百度地图导航显示 -->
    <div id='allmap'></div>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="../../backend/plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../backend/plugins/element-ui/index.js"></script>
<!-- 引入vant样式 -->
<script src="./../js/vant.min.js"></script>
<script src="./../api/address.js"></script>
<!-- 引入axios -->
<script src="../../backend/plugins/axios/axios.min.js"></script>
<script src="./../js/request.js"></script>
<script>
    new Vue({
        el: "#address",
        data() {
            return {
                addressData:
                    {
                        //经度
                        districtCode: '',
                        //纬度
                        districtName: ''
                    },
                timeBaidu: '',
                wayBaidu: ''
            }
        },
        computed: {},
        created() {
            this.initData();
        },
        mounted() {
        },
        methods: {
            goBack() {
                history.go(-1)
            },
            async initData() {
                const res = await addressBaiduApi()
                if (res.code === 1) {
                    var data = res.data;
                    this.addressData.districtCode = data.districtCode;
                    this.addressData.districtName = data.districtName
                } else {
                    this.$message.error(res.msg)
                }
                this.$nextTick(await this.baiduAddress())
            },

            async baiduAddress() {
                var districtCode = this.addressData.districtCode;
                var districtName = this.addressData.districtName;
                var map = new BMapGL.Map("allmap");
                map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12);
                var output = "外卖送到需要";
                var searchComplete = function (results) {
                    if (transit.getStatus() != BMAP_STATUS_SUCCESS) {
                        return;
                    }
                    var plan = results.getPlan(0);
                    var timeBaidu = plan.getDuration(true);
                    var wayBaidu = plan.getDistance(true);
                    output += timeBaidu + "\n";                //获取时间
                    output += "总路程为：";
                    output += wayBaidu + "\n";             //获取距离
                    timeWay({'timeBaidu': timeBaidu, 'wayBaidu': wayBaidu})
                }
                var transit = new BMapGL.DrivingRoute(map, {
                    renderOptions: {map: map},
                    onSearchComplete: searchComplete,
                    onPolylinesSet: function () {
                        setTimeout(function () {alert(output)
                        }, "1000");
                    }
                });
                var start = new BMapGL.Point(117.349239, 31.865439);
                var end = new BMapGL.Point(districtCode, districtName);
                transit.search(start, end);
            }
        }
    })
</script>

</body>
</html>